<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/chongzhi.css">
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<title>飞鸟</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header clearfix">
			<div class="h-left">
				<img src="./img/logo.png" >
				<span>后台管理</span>
			</div>
			<div class="h-right">
				<span class="mr25">2019年08月22日</span>
				<span class="mr25">星期四</span>
				<span class="avatar mr10"><img src="./img/avatar.png" alt=""></span>
				<span class="user mr30">赵先生您好！</span>
			</div>
		</div>
		<!-- 左侧 -->
		<div class="left">
			<ul class="nav">
				<li class="item">
					数据总览
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>					
				</li>
				<li class="item huiyuan">
					会员管理
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
				<li class="item down">
					下载记录
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
				<li class="item chongzhi active">
					充值记录
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
				<li class="item qianxian">
					供应商权限
					<span class="layui-icon layui-icon-right jiantou"></span>
					<span class="line"></span>
				</li>
			</ul>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<div class="title clearfix">
				<div class="t-left">充值记录</div>
				<div class="t-right">
					<span class="day active">7天</span>
					<span class="day">15天</span>
					<span class="day">30天</span>
					<span class="search">
						<input type="text" name="search" /><button type="button">搜索</button>
					</span>
				</div>
			</div>
			<div class="content">
				<table class="layui-hide" id="test"></table>
			</div>
			
		</div>
	</body>
	
	<script type="text/javascript">
		layui.use(['laypage', 'element','jquery','layer','table'], function(){
		  var laypage = layui.laypage,
			  $ = layui.$,
			  layer = layui.layer,
			  table = layui.table,
			  element = layui.element;
			
			table.render({
				elem: '#test'
				// ,url:'/demo/table/user/'
				,cellMinWidth: 80 ,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
				limit:10,
				page:true
				,cols: [[
				  {field:'time', title: '时间',align:'center'}
				  ,{field:'order', title: '订单编号',align:'center'}
				  ,{field:'name', title: '客户昵称',align:'center'}
				  ,{field:'phone',title: '客户手机号',align:'center'}
				  ,{field:'type', title: '支付方式',align:'center'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
				  ,{field:'money', title: '充值金额',align:'center'}
				  ,{field:'song', title: '赠送金额',align:'center'}
				  ,{field:'status', title: '充值状态',align:'center',style:'color:#00cc56' }
				]]
				,data: [{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				}, {
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值成功"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				},{
				  "time": "19-08-26 15:33:35"
				  ,"order": "65659533"
				  ,"name": "尖尖上设计"
				  ,"phone": "客户手机号"
				  ,"type": "支付宝"
				  ,"money": "￥100"
				  ,"song": "￥1.5"
				  ,"status": "充值失败"
				}]
			});
			$(".layui-table-cell:contains('充值失败')").css('color','#ff5050')
		});
	</script>
</html>
